<template>
  <el-card class="list-page">
    <div class="list-h">
      <el-button
        type="primary"
        @click="handleOperate('add')"
        v-auth="`/projectsA/section--add`"
        class="add-option"
        >创建新标段</el-button
      >

      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        class="demo-form-inline"
      >
        <el-form-item label="标段名称" prop="sectionNameLike">
          <el-input
            class="width-custom120"
            v-model="formInline.sectionNameLike"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            @click="handleSearch"
            v-auth="`/projectsA/section--query`"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        stripe
        v-loading="loading"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="50">
          <template v-slot="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sectionCode" label="标段编号"> </el-table-column>
        <el-table-column label="标段名称">
          <template #default="{ row }">
            <el-button type="text" @click="lookMonomer(row)">{{
              row.sectionName
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="160"
        ></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="handleOperate('edit', row)"
              v-auth="`/projectsA/section--edit`"
              >编辑</el-button
            >
            <el-button
              type="text"
              class="btns-danger"
              v-auth="`/projectsA/section--delete`"
              @click="showDeleteMessageBox(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-skeleton>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
  </el-card>
</template>

<script lang="ts">
import { reactive, toRefs, ref, defineComponent } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import RePagination from "/@/components/RePagination/index.vue";
import NotifMessage from "/@/utils/message/notification";
import { getSection, deleSection } from "/@/api/projects";
import { storageLocal } from "/@/utils/storage";
export default defineComponent({
  name: "section",
  components: {
    RePagination
  },

  setup() {
    let router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let loading = ref<boolean>(false);
    let total = ref<number>(0);
    let projectInfo = storageLocal.getItem("projectInfo");
    let formInline = reactive({
      projectId: projectInfo?.id,
      pageNum: 1,
      pageSize: 10,
      sectionNameLike: ""
    });

    let state = reactive({
      tableData: []
    });
    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    //获取单体列表
    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await getSection(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    const handleOperate = (type, row = {}) => {
      if (type === "add") {
        router.push({
          path: "/projectsA/proManage/section/detail"
        });
      } else if (type === "edit") {
        router.push({
          path: "/projectsA/proManage/section/detail",
          query: {
            id: row.id
          }
        });
      }
    };

    // 删除单体
    const handleDelete = async (item: any) => {
      try {
        const { code, message } = await deleSection({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData(formInline);
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };
    const showDeleteMessageBox = row => {
      ElMessageBox.confirm("确定删除该条记录吗？", "", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        iconClass: "el-icon-warning"
      })
        .then(() => {
          handleDelete(row);
        })
        .catch(() => {});
    };

    const lookMonomer = row => {
      storageLocal.setItem("sectionInfo", {
        id: row.id,
        name: row.sectionName
      });
      router.push({
        path: "/projectsS/proManage/monomer",
        query: {
          id: row.id
        }
      });
    };

    // 请求数据
    getTableData(formInline);
    return {
      ...toRefs(state),
      total,
      formRef,
      loading,
      formInline,
      handleReset,
      handleSearch,
      handleDelete,
      showDeleteMessageBox,
      handleOperate,
      lookMonomer
    };
  }
});
</script>
<style>
.el-icon-warning {
  color: #e45d5d !important;
}
</style>
<style lang="scss" scoped></style>
